<script lang="ts" setup>
import { getHealthSX } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'
const dayjs = useDayjs()
const queryParams = {
    "colNames": [
       "title_name","origin","release_time","cover_file_name","id"
    ],
    "condition": [
        {
        "colName": "positions_one", 
        "value": "首页", 
        "ruleType": "eq"
        },
        {
        "colName": "status", 
        "value": "已审核", 
        "ruleType": "eq"
        }
        ]
}
function getData() {
    getHealthSX(queryParams).then((res) => {
        zhengCe.value = res.data.map(item=>({
            title:item.title_name,
            publier:item.origin,
            date:dayjs(item.release_time).format('YYYY-MM-DD'),
            id:item.id,
            url:item.cover_file_name
        })).slice(0, 10)
    }).catch(() => {
    })
}
function clickItem(item) {
    getHealthSX({
        condition: [{ colName: 'id', ruleType: 'eq', value: item.id }],
    },).then(res => {
        navigateTo({
            path: `/peopleHealth/healthyShaanxiDetail`,
            query: {
                data: encode(res.data[0]),
            },
        })
    })
}
const props = defineProps({
    type: {
        type: [Array, String],
        default: () => [],
    },
    isFF: {
        type: Boolean,
        default: false,
    },
})
const zhengCe = ref([{
    title: "陕西省人民政府办公厅关于推进新时代全省地方志事业高质量发展的实施...",
    date: "2021-09-28",
},
{
    title: "西安市人民政府办公厅关于印发耕地保护激励奖补暂行办法的通知",
    date: "2021-09-28",
},
{
    title: "西安市人民政府关于进一步做好稳就业工作的通知",
    date: "2021-09-28",
},
{
    title: "国务院关于在自由贸易试验区开展“证照分离”改革全覆盖试点的通知",
    date: "2021-09-28",
},
])

const wenjuan = ref([{
    title: "雁塔区方志馆",
    state: 5000,
},
{
    title: "临潼区方志馆",
    state: 3500,
},
{
    title: "碑林区方志馆",
    state: 3500,
},
])
getData()
</script>
<template>
    <div class="mx-auto bg-image  min-h-600px" flex="~ justify-between"
        :class="{ 'w-1200px': props.type === '全部', 'w-900px': props.type !== '全部' }">
        <div class="zhenCe min-w-750px border-2 border-solid border-#AC8358 rounded-10px">
            <div class="flex justify-between items-center p-2">
                <div class="bg-l-image m-x-4 m-t-4">政策解读</div>
                <div class="m-x-4 m-t-4">
                    <NuxtLink to="/peopleHealth/healthyShaanxi">
                    <span class=" text-#977D6A m-1 cursor-pointer">更多</span>
                    </NuxtLink>
                    <img class="flex-shrink-0 w-25px h-25px inline" src="/img/homeico.png" alt="" />
                </div>
            </div>
            <div class="p-x-4.5">
                <div v-for="(item, index) in zhengCe" flex="~ justify-between place-items-center"
                    class="m-t-4 active:text-#AC8358">
                    <b class="cursor-pointer whitespace-nowrap max-w-520px overflow-hidden text-ellipsis" @click="clickItem(item)">{{ item.title }}</b><br />
                    <div>{{ item.date }}</div>
                </div>
            </div>

        </div>
        <div class="yiJian min-w-400px border-2 border-solid border-#AC8358 rounded-10px">
            <div class="flex justify-between items-center p-2">
                <div class="bg-l-image m-x-4 m-t-4">来稿征集</div>
                <div class="m-x-4 m-t-4">
                    <span class=" text-#977D6A m-1 cursor-pointer">更多</span>
                    <img class="flex-shrink-0 w-25px h-25px inline" src="/img/homeico.png" alt="" />
                </div>
            </div>
            <div flex="~ justify-around" class="btuu">
                <div>
                    <div class="p-l-5px"> <i class="i-ri:draft-line h-50px w-50px   text-center" /></div>
                    <div>意见征集</div>
                </div>
                
                <div>
                    <NuxtLink to="/peopleHealth/EmailSubmint">
                    <div class="p-l-5px"><i class="i-ri:chat-search-line h-50px w-50px   text-center" /></div>
                    <div>我要投稿</div>
                    </NuxtLink>
                </div>
            
                <!-- <div>
                    <div class="p-l-5px"><i class="i-ri:dashboard-3-line h-50px w-50px text-center" /></div>
                    <div>数据统计</div>
                </div> -->
            </div>
            <div>
                <div class="flex justify-between items-center p-2 ">
                    <div class="bg-l-image m-x-4 m-t-4">资源统计</div>
                    <div class="m-x-4 m-t-4">
                        <span class=" text-#977D6A m-1 cursor-pointer">更多</span>
                        <img class="flex-shrink-0 w-25px h-25px inline" src="/img/homeico.png" alt="" />
                    </div>
                </div>
                <div class="m-l-8 p-r-4" grid="~ cols-2 gap-10px">
                    <div  v-for="(item, index) in wenjuan"  class="m-t-10px">
                        <b class="cursor-pointer whitespace-nowrap max-w-300px overflow-hidden text-ellipsis active:text-#AC8358">*{{ item.title }}</b><br />
                        <div class="text-#AC8358 m-l-20px">{{ item.state }}本</div>
                    </div>

                </div>
            </div>


        </div>
    </div>
</template>

<style lang="scss" scoped>
.bg-image {

    .zhenCe {
        background-image: url('/img/homeBooks.png');
        background-repeat: round;
    }

    .yiJian {
        background-image: url('/img/homeBooks.png');
        background-repeat: round;

        .diaocha {
            background-image: url('/img/homeBookl.png');
            background-repeat: round;

        }

        .btuu {

            &>div {
                border: 2px solid #bbaa98;
                padding: 1rem;
                border-radius: 5px;
                cursor: pointer;

                &:active {
                    border: 2px solid #b8762f;
                    color: #b8762f;
                }

            }

        }

    }


    .bg-l-image {
        background-image: url('/img/homeBookl.png');
        color: white;
        font-size: 1.6rem;
        width: 200px;
        padding-right: 2.25rem;
        line-height: 3.5rem;
        text-align: center;
        font-family: cursive;
    }

}
</style>
